<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <view class="page">
      <view class="notice-info">
        <!-- #ifdef WEB -->
        <view><text class="text">Web 端背景色为绿色，字体颜色为蓝色</text></view>
        <!-- #endif -->
        <!-- #ifdef MP -->
        <view><text class="text">小程序端背景色为蓝色，字体颜色为红色</text></view>
        <!-- #endif -->
        <!-- #ifdef APP -->
        <view><text class="text">App 端背景色为红色，字体颜色为绿色</text></view>
        <!-- #endif -->
      </view>
      <view class="mt-10">
        <text class="text text-primary">color: $primary-color: #3498db</text>
      </view>
      <view class="mt-10">
        <text class="text text-secondary"
          >color: $secondary-color: #9353D3</text
        >
      </view>
      <view class="list mt-10">
        <view class="item border-radius-4">
          <text class="text">label:</text>
          <text class="text">value</text>
        </view>
        <view class="item border-radius-4 active mt-10">
          <text class="text">label:</text>
          <text class="text">value</text>
        </view>
      </view>
      <view class="_list mt-10">
        <view class="item border-radius-4">
          <text class="text">label:</text>
          <text class="text">value</text>
        </view>
        <view class="item border-radius-4 active mt-10">
          <text class="text">label:</text>
          <text class="text">value</text>
        </view>
      </view>
      <view class="message-list mt-10">
        <text class="message">message</text>
        <text class="mt-10 success-message">success message</text>
        <text class="mt-10 error-message">error message</text>
      </view>
      <view class="message-list mt-10">
        <text
          >以下 message 字体，Web 端比以上 message 更细，App | MP 端更粗</text
        >
        <text class="mt-10 _message">message</text>
        <text class="mt-10 _success-message">success message</text>
        <text class="mt-10 _error-message">error message</text>
      </view>
      <view class="list mt-10">
        <view class="item-1"><text class="text">item-1</text></view>
        <view class="item-2 mt-10"><text class="text">item-2</text></view>
        <view class="item-3 mt-10"><text class="text">item-3</text></view>
        <view class="item-4 mt-10"><text class="text">item-4</text></view>
        <view class="item-5 mt-10"><text class="text">item-5</text></view>
      </view>
      <view class="list mt-10">
        <view class="_item-1"><text class="text">item-1</text></view>
        <view class="_item-2 mt-10"><text class="text">item-2</text></view>
        <view class="_item-3 mt-10"><text class="text">item-3</text></view>
        <view class="_item-4 mt-10"><text class="text">item-4</text></view>
        <view class="_item-5 mt-10"><text class="text">item-5</text></view>
      </view>
      <view class="debug mt-10">this is debug view</view>
      <view class="_debug mt-10">this is debug view</view>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<style lang="stylus">
@import '../../styles/variables.styl';
@import '../../styles/index.styl';

$secondary-color = #9353d3
// 使用变量
.text-secondary
  color: $secondary-color

// 嵌套选择器
._list
  @extend .padding-10
  border: $border-width solid $red-color
  .item
    display: flex
    justify-content: space-between
    align-items: center
    flex-direction: row
    padding: 5px 10px
    background-color: #3498db
    // 状态选择器
    &.active
      background-color: #0983d5
    .text
      color: $white-color

// 使用混合器
_borderRadius()
  border-radius arguments

._border-radius-4
  _borderRadius: 4px

._border-radius-10
  _borderRadius: 10px

.message-list{
  text{
    display: block;
  }
}

// 使用 extends
._message
  @extend .padding-10
  @extend .border-radius-4
  border: $border-width solid #ccc
  /* #ifdef APP */
  font-weight: 700
  /* #endif */
  /* #ifdef WEB */
  font-weight: 300
  /* #endif */

._success-message
  @extend .message
  border-color: $green-color
  color: $green-color

._error-message
  @extend .message
  border-color: $red-color
  color: $red-color

// 条件语句
$debug-mode: true

._debug
  if $debug-mode
  // 调试样式
    @extend .padding-10
    @extend .border-radius-4
    border: $border-width solid $red-color
  else
  // 生产样式
    display: none

// 循环
for index in (1..5)
  ._item-{index}
    @extend .border-radius-4
    width: 60px * index
    height: 30px
    padding-left: 5px
    background-color: $primary-color
    .text
      line-height: 30px
      color: $white-color
</style>
